<!--
 * @Description: 看板假数据设置
 * @Author: lwx
 * @Date: 2023-03-13 16:49:49
 * @LastEditors: lwx
 * @LastEditTime: 2023-05-04 11:31:19
-->
<template>
  <div class="fillcontain">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="vertical"></span>
        <span>当前看板模式</span>
        <span class="data_model">({{ model===true?'真实数据':'假数据源' }})</span>
        <el-switch
          class="fr"
          v-model="model"
          active-color="#dcdfe6"
          inactive-color="#13ce66"
          inactive-text="切换模式"
          @change="settingModel">
        </el-switch>
      </div>
      <div v-show="!model">
        <div class="d-flex">
          <div class="common top_left">
            <div class="module_title">今日计划数据</div>
            <div class="mt-3">
              <el-form ref="todayForm" label-width="120px" :model="todayForm" size="mini">
                <el-form-item prop="amount" label="今日计划数量">
                  <el-input-number v-model="todayForm.amount"></el-input-number>
                </el-form-item>
                <el-form-item prop="number" label="合格数量">
                  <el-input-number v-model="todayForm.number"></el-input-number>
                </el-form-item>
                <el-form-item prop="ng" label="不合格数量">
                  <el-input-number v-model="todayForm.ng"></el-input-number>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="common top_right">
            <div class="module_title">在产订单数据</div>
            <div class="mt-3">
              <el-form ref="orderForm" :model="orderForm" label-width="90px" :inline="true" size="mini">
                <el-form-item prop="order_no" label="订单号">
                  <el-input v-model="orderForm.order_no"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="订单名称">
                  <el-input v-model="orderForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="product_name" label="产品名称">
                  <el-input v-model="orderForm.product_name"></el-input>
                </el-form-item>
                <el-form-item prop="specifications" label="产品规格">
                  <el-input v-model="orderForm.specifications"></el-input>
                </el-form-item>
                <el-form-item prop="quantity" label="订单数量">
                  <el-input-number v-model="orderForm.quantity"></el-input-number>
                </el-form-item>
                <el-form-item prop="start" label="订单时间">
                  <el-date-picker 
                    v-model="orderForm.start" 
                    placeholder="开始日期"
                    value-format="yyyy-MM-dd"
                    style="width:180px">
                  </el-date-picker> -
                  <el-date-picker 
                    v-model="orderForm.finish" 
                    placeholder="订单交期"
                    value-format="yyyy-MM-dd"
                    style="width:180px"> 
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="common mt-3">
          <div class="module_title">设备数据</div>
          <div class="mt-3 d-flex flex-wrap jc-around">
            <div v-for="(dev,index) in devForm"  :key="index" class="dev_container" >
              <div class="_name">{{dev.machines}}</div>
              <el-form  size="mini" label-width="0" >
                <el-form-item v-for="(item,index2) in dev.data" :key="index2">
                  <el-input v-model="item.key" @change="changDevData(item)" style="width:45%;margin-right: 5%;"></el-input>
                  <el-input v-model="item.value" @change="changDevData(item)" style="width:50%"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="mt-4 ml-1">
          <el-button type="primary" @click="saveData()">保存</el-button>
          <el-button @click="reset">清空</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getReportSetting,settingReportModel,getFakeToday,getFakeOrder,updateFakeToday,
updateFakeOrder,getFakeDev,updateFakeDev} from '@/api/fake.js'
export default {
  data() {
    return {
      model:true,
      todayForm: { //今日计划数据
        amount: 0,
        number: 0,
        ng: 0,
      },
      orderForm:{//订单数据
        quantity:0,
      },
      devForm:[]
    }
  },
  created() {
    this.getDashboradModel()//获取当前看板模式
  },
  methods:{
    //获取当前看板模式
    async getDashboradModel(){
      const res=await getReportSetting()
      this.model=res.mode
      if(this.model===false){
       this.getFakeToday()
       this.getFakeOrder()
       this.getFakeDev()
      }
    },
    //获取假数据,显示
    async getFakeToday(){
     const {data}= await getFakeToday()
     this.todayForm=data
    },
    async getFakeOrder(){
     const {data}= await getFakeOrder()
     this.orderForm=data
    },
    async getFakeDev(){
     const {data}= await getFakeDev()
     this.devForm=data
    },
    //保存假数据
   async saveData(){
      delete this.todayForm.id
      await updateFakeToday(this.todayForm)
      delete this.orderForm.id
      await updateFakeOrder(this.orderForm)
      this.$message.success('设置成功！')
    },
    //改变设备数据
    async changDevData(data){
      const res=await updateFakeDev(data)
      this.$message.success(res.msg)
      this.getFakeDev()
    },
    //设置看板模式（true 真数据 false 假数据）
    async settingModel(val){
      await settingReportModel(val)
      this.model=val
      val===true?this.$message.success('已关闭看板假数据！'):
      this.$message.success('已开启看板假数据！')
      if(this.model===false){
       this.getFakeToday()
       this.getFakeOrder()
       this.getFakeDev()
      }
    },
    reset(){
      this.$refs['todayForm'].resetFields();
      this.$refs['orderForm'].resetFields();
      this.orderForm.finish=null
    }
  }
}
</script>
<style lang='scss' scoped>
.vertical{
  display: inline-block;
  width: 5px;
  height: 20px;
  border-radius: 5px;
  vertical-align: bottom;
  margin-right: 10px;
  background-color: #66b1ff;
}
.data_model{
 color:#606266;
 padding-left: 5px;
}
.common{
  background: #fafafa;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px 15px;
  .module_title{
   font-weight: 600;
   color: #606266;
 }
}
.top_left {
  flex: 1;
  margin-right: 15px;
}
.top_right {
  flex: 2;
}

.dev_container{
   border: 1px solid #EBEEF5;
   width: 31%;
   padding: 15px 15px 0 15px;
   margin-bottom: 15px;
  ._name{
  font-size: 15px;
  height: 30px;
  text-align: center;
 }
}

/deep/.el-card__header{
  font-weight: 600;
}
</style>